<template>
  <div class="container">
    <div class="page-header">
      <span class="title-item">领用申请</span>
    </div>
    <div class="page-body">
        <a-form layout="horizontal" :form="form" :colon="false">
          <a-row type="flex">
            <a-col :span="8" :offset="1">
              <a-form-item
                class="form-item"
                label="设备名称"
                style="color: #1890ff"
                >{{ detailinfor.comparatorName }}</a-form-item
              >
            </a-col>
            <a-col :span="6" :offset="1">
              <a-form-item
                class="form-item"
                label="设备型号"
                style="color: #1890ff"
                >{{ detailinfor.comparatorMn }}</a-form-item
              >
            </a-col>
            <!-- <a-col :span="6" :offset="1">
              <a-form-item
                class="form-item"
                label="当前部门"
                style="color: white"
                :colon="false"
                >xxxxx部门</a-form-item
              > </a-col
            >> -->
          </a-row>

<!--          <a-row>-->
<!--            <a-col :span="8" :offset="1">-->
<!--              <a-form-item class="form-item" label="申请大区" labelAlign="right" :colon="false">-->
<!--                <a-select class="fuze-management" allow-clear v-model="form.applyAreaId" @change="selectedpro">-->
<!--                  <a-select-option :value="item.id" v-for="(item, index) in deptList" :key="index">{{ item.name }}</a-select-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--            <a-col :span="6" :offset="1">-->
<!--              <a-form-item class="form-item" label="计划归还时间" labelAlign="right" :colon="false">-->
<!--                <a-date-picker @change="onChange" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD"/>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--          </a-row>-->

<!--          <a-row>-->
<!--            <a-col :span="8" :offset="1">-->
<!--              <a-form-item class="form-item" label="使用项目" labelAlign="right" :colon="false">-->
<!--                <a-input class="inline-input" placeholder autocomplete="off" v-model="form.userProject"></a-input>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--          </a-row>-->

          <a-row>
            <a-col :span="23" :offset="1">
              <a-form-item class="form-item" label="备注" labelAlign="right" :colon="false">
                <a-input class="inline-input" placeholder autocomplete="off" style="height: 100px" v-model="form.note"></a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col class="submit-box">
              <a-button type="primary" style="margin-right: 15px" @click="confirmApply()">确认申领</a-button>
              <a-button @click="a">返回列表</a-button>
            </a-col>
          </a-row>
        </a-form>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
export default {
  name: "index",
  data() {
    return {
      form: {
        comparatorId: "",
        comparatorName: "",
        comparatorVersion: "",
        currentDeptId: "",
        applyAreaId: "",
        applyUserId: "",
        returnTime: "",
        userProject: "",
        note: "",
      },
      moment,
      detailinfor: {},
      deptList: [], //部门列表
    };
  },
  mounted() {
    this.findDetail();
    this.deptData();
    this.currentDeptId = this.$user.deptId;

    this.applyUserId = this.$user.id;
    console.log(this.$user);
  },
  methods: {
    onTouruChange(e) {
      console.log(e);
    },
    // 点击换页面
    a() {
      this.$router.go(-1);
    },
    //查询部门
    deptData() {
      let id = 2;
      this.$api.getArea(id).then((res) => {
        console.log(res.data.data);
        this.deptList = res.data.data;
      });
      // this.$api
      //   .PostdeptFindByPage({
      //     current: 1,
      //     size: 1000,
      //     deptName: "",
      //     deptTypeId: "",
      //   })
      //   .then((res) => {
      //     this.deptList = res.data.data;
      //     console.log(res);
      //   });
    },
    //部门下拉选中数据
    selectedpro() {
      console.log(this.form.applyAreaId);
    },
    // 获取当前id设备详情
    findDetail() {
      this.form.comparatorId = this.$route.query.machineId;
      console.log(this.form.comparatorId);
      this.$api
        .GetcomparatorRecipientsDetails(this.form.comparatorId)
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.detailinfor = res.data.data;
          }
        });
    },
    // 确认申领
    confirmApply() {
      this.form.comparatorName = this.detailinfor.comparatorName;
      this.form.comparatorVersion = this.detailinfor.comparatorMn;
      this.form.applyUserId = this.$user.id;
      console.log(this.form);
      this.$api.PostdoComparatorRecipients(this.form).then((res) => {
        if (res.status == 200) {
          this.$message.success("操作成功");
          this.form = {
            comparatorId: "",
            comparatorName: "",
            comparatorVersion: "",
            currentDeptId: "",
            applyAreaId: "",
            applyUserId: "",
            returnTime: "",
            userProject: "",
            note: "",
          };
          this.$router.go(-1);
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    onChange(date, dateString) {
      console.log(date, dateString);
      this.form.applyTime = moment(dateString).valueOf();
      console.log(this.form.applyTime);
    },
  },
};
</script>

 <style scoped src="../../../assets/style/pollution.css"></style>
<style scoped lang="scss">
::v-deep .ant-col .ant-form-item-control-wrapper {
  width: 80%;
}
::v-deep .ant-col .ant-form-item-label {
  width: 110px;
}
::v-deep .page-header {
  margin-left: 25px;
  margin-top: 30px;
}

::v-deep .ant-form-item {
  display: flex;
}
::v-deep .submit-box {
  float: right;
  margin-right: 200px;
}
::v-deep .select-to {
  border: 1px solid #bebebe;
  color: #bebebe;
  background: #2b4341;
}
.page-body {
  margin-top: 70px;
}
</style>